<template>
  <div id="dashboard">

    <div style="    margin-left: 10px;
    margin-right: 10px;">
      <el-row :gutter="20">
        <el-col :sm="24">
          <div class="today-basic">
            <el-col :span="columnRan[0]">
              <h3>车辆总数</h3>
              <div class="today-status">
                <router-link tag="a" :to='{path:"/entp/entp/list"}'>
                  <a href="javascript:void(0)">
                    <span class="num" v-for="(item,index) in (basic.totalVec+'').split('')" :key="index">{{item}}</span>
                  </a>
                </router-link>
              </div>
            </el-col>
            <el-col :span="columnRan[1]">
              <h3>当前运行车辆</h3>
              <div class="today-status">
                <router-link tag="a" :to='{path:"/entp/ship/list"}'>
                  <a href="javascript:void(0)">
                    <span class="num" v-for="(item,index) in (basic.runVec+'').split('')" :key="index">{{item}}</span>
                  </a>
                </router-link>
              </div>
            </el-col>
            <el-col :span="columnRan[2]">
              <h3>报警次数</h3>
              <div class="today-status">
                <router-link tag="a" :to='{path:"/entp/pers/list"}'>
                  <a href="javascript:void(0)">
                    <span class="num" v-for="(item,index) in (basic.totalAlarm+'').split('')"
                          :key="index">{{item}}</span>
                  </a>
                </router-link>
              </div>
            </el-col>
            <el-col :span="columnRan[3]">
              <h3>异常开锁次数</h3>
              <div class="today-status">
                <!--<router-link tag="a" :to='{path:"/entp/sailor/list"}'>-->
                <!--<a href="javascript:void(0)">-->
                <!--<span class="num" v-for="(item,index) in  (basic.sailorAmount+'').split('')" :key="index">{{item}}</span>-->
                <!--</a>-->
                <!--</router-link>-->
                <span class="num">0</span>
              </div>
            </el-col>
            <el-col :span="columnRan[4]">
              <h3>货运量(吨)</h3>
              <div class="today-status">
                <span class="num" v-for="(item,index) in  (basic.cargoAmount+'').split('')" :key="index">{{item}}</span>
              </div>
            </el-col>
          </div>
          <div class="today-basic">
            <el-col :span="columnRan[1]">
              <h3>待提货</h3>
              <div class="today-status">
                <span class="num" v-for="(item,index) in  (basic.pendingPick+'').split('')" :key="index">{{item}}</span>
              </div>
            </el-col>
            <el-col :span="columnRan[2]">
              <h3>已提货</h3>
              <div class="today-status">
                <span class="num" v-for="(item,index) in  (basic.picked+'').split('')" :key="index">{{item}}</span>
              </div>
            </el-col>
            <el-col :span="columnRan[0]">
              <h3>运输中</h3>
              <div class="today-status">
                <span class="num" v-for="(item,index) in  (basic.picked+'').split('')" :key="index">{{item}}</span>
              </div>
            </el-col>
            <el-col :span="columnRan[3]">
              <h3>已到达</h3>
              <div class="today-status">
                <span class="num" v-for="(item,index) in  (basic.arrived+'').split('')" :key="index">{{item}}</span>
              </div>
            </el-col>
            <el-col :span="columnRan[4]">
              <h3>已回单</h3>
              <div class="today-status">
                <span class="num" v-for="(item,index) in  (basic.arrived+'').split('')" :key="index">{{item}}</span>
              </div>
            </el-col>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="6" :md="6" :lg="6">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <!-- 报警统计情况 -->
              <bar-echarts title="报警统计情况" :echartsHeight="'290px'" ref="entpType"></bar-echarts>
            </el-col>

          </el-row>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <!-- 货物流向统计 -->
          <map-flow-echarts title="货物流向统计" :echartsHeight="'290px'" ref="goodsFlow"></map-flow-echarts>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <!-- 货运量统计 -->
              <bar-echarts title="货运量统计" :echartsHeight="'290px'" ref="tranType"></bar-echarts>
            </el-col>

          </el-row>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  import * as $http from '@/api/dashboard';
  import pieEcharts from './components/pie-echarts'; // 饼图
  import barEcharts from './components/bar-echarts'; // 柱状图
  import mutiBarEcharts from './components/muti-bar-echarts'; // 柱状图
  import mapFlowEcharts from './components/map-flow-echarts'; // 地图流向图

  export default {
    components: {
      pieEcharts,
      barEcharts,
      mutiBarEcharts,
      mapFlowEcharts
    },
    data() {
      return {
        columnRan: [5, 5, 5, 5, 4],
        todayTime: new Date(),
        basic: {
          totalVec: 0,				// 企业数
          runVec: 0,				// 船舶数
          totalAlarm: 0,			// 高级船员
          cargoAmount: 0,				// 资质人员
          pendingPick: 0,				// 航道数
          picked: 0,				// 货物周转量(万吨公里)
          arrived: 0,		// 企业安全检查数量
          govSaftyCheckAmount: 0,		// 政府安全检查数量
          cgamountAmount: 0,			// 货运量
          pgcapacityAmount: 0,			// 客运量
        },
        intervalTimers: []
      };
    },
    created() {

    },
    mounted() {
      let _this = this;
      this.refreshTime();		// 看板时间展示

      // 获取看板基础信息
      this.getBasicData();
//
		// 货物流向统计
		this.getGoodsFlow();
//
//		// 安全检查情况
//		this.getSafeType();
//
//		// 隐患统计
//		this.getHiddenDangers();
//
      // 企业分类情况
      this._getAlarmType();
//
//		// 船舶情况统计
//		this.getShipType();
//
//		// 货运量与周转量统计
      this._getCargoAmountTrend();
//
//		// 货物类型统计
//		this.getGoodsType();
    },
    destroyed() {
      this.intervalTimers.forEach(item => {
        clearTimeout(item);
      })
    },
    methods: {
      // 看板时间展示
      refreshTime() {
        let _this = this;
        setInterval(function () {
          _this.todayTime = new Date();
        }, 1000);
      },
      // 获取看板基础信息
      getBasicData() {
        let _this = this;
        $http.getBasicData().then(res => {
          if (res && res.code == 0) {
            Object.keys(_this.basic).forEach(item => {
              if (res[item] != undefined) {
                _this.$set(_this.basic, item, res[item]);
              }
            })
          }
        })
      },

      // 货物流向统计
      getGoodsFlow() {
        let _this = this;
        // $http.getGoodsFlow().then(res=>{			// [起始地，目的地，货物数量]
        let res = {
          code:0,
          data:[
            ['宁波','上海','34万吨'],
            ['宁波','深圳',56.5],
            ['宁波','广州',44.5],
            ['宁波','天津',23],
            ['宁波','宁波',67],
            ['宁波','苏州',134],
            ['宁波','青岛',234],
            ['大连','宁波',321],
            ['南京','宁波',234.5],
            ['上海','宁波',189.3],
            ['泉州','宁波',167.8],
            ['天津','宁波',136.9],
            ['青岛','宁波',45.9],
            ['深圳','宁波',28.6],
          ]
        }
        if(res && res.code==0){
          let seriesData = res.data;
          _this.$refs.goodsFlow.setData(seriesData);
        }

      },

      // 统计不同安全检查类型的数量
      getSafeType() {

      },

      // 隐患统计
      _getCargoAmountTrend() {

        $http
          .getCargoAmountTrend()
          .then(data => {
            let _this = this;
            let xAxisArr = [],
              seriesData = [];
            if (data && data.length > 0) {
              xAxisArr = data.map(item => {
                return item.key;
              });
              seriesData = data.map(item => {
                return {name: item.key, value: item.value};
              });
            }
            this.$refs.tranType.setData(seriesData, xAxisArr)
          });

      },

      // 报警分类情况
      _getAlarmType() {
        $http
          .getAlarmType()
          .then(data => {
            let _this = this;

            let xAxisArr = [],
              seriesData = [];
            if (data && data.length > 0) {
              xAxisArr = data.map(item => {
                return item.key;
              });
              seriesData = data.map(item => {
                return {name: item.key, value: item.value};
              });
            }
            this.$refs.entpType.setData(seriesData, xAxisArr)
          })
          .catch(error => {
            console.log(error);
          });
      }
      ,

      // 船舶情况统计
      getShipType() {

      }
      ,


      // 货物类型统计
      getGoodsType() {

      }
    }

  };
</script>

<style>
  #dashboard {
    width: 100%;
    height: 100%;
    /* min-height: 1080px; */
    margin: 0px;
    padding: 0px;
    background: url('~@/assets/dashboard-img/backgroundimage.v1.2.jpg');
    background-size: 100% 100%;
  }

  .topbar {
    height: 3.2em;
    display: block;
    border-bottom: 1px solid #233a67;
    margin: 0px 20px;
  }

  #today-time {
    color: #aaa;
    text-align: right;
    font-size: 0.8em;
    line-height: 4.5em;
    height: 4.5em;
  }

  .topbar h1 {
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 3em;
    font-weight: 400;
  }

  .bottombar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.4em;
    background-color: #000;
    display: block;
  }

  .grid-row {
    /* margin-bottom: 10px; */
  }

  .chart-bordered h3 {
    color: #fff;
    background-color: #0b1d54;
    border: 1px solid #2075a9;
    line-height: 25px;
    height: 35px;
    font-size: 0.8em;
    margin: 10px;
    font-weight: 100;
    padding: 5px 10px;
    position: relative;
    text-align: center;
  }

  .today-basic {
    height: 140px;
  }

  .today-basic h3 {
    /*color: #00c0ff;*/
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
    margin: 0;
    padding: 5px 10px;
  }

  .today-basic .today-status {
    color: #fff;
    margin: 0;
    padding: 5px 10px;
  }

  .today-basic .today-status span {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    display: inline-block;
    padding: 10px 2px;
    font-size: 2em;
    color: #fff;
    margin: 0 2px;
    font-weight: 500;
    border-radius: 1px;
  }

  .today-basic .today-status span.num {
    background-color: #237ae6;
  }

  .today-basic .today-status span.pun {
    padding: 10px 0px;
    margin: 0 1px;
  }

  .today-basic .extra {
    color: #e9b62c;
    margin: 0;
    font-size: 0.8em;
    padding: 5px 10px;
  }
</style>
